<template>
  <div id="login_page">
    <div class="login__header">
      <el-row class="login__header-inner" type="flex" justify="center" align="middle">
        <!--                <span class="el-tag login__header-version"></span>-->
        <el-col :span="12">
          <span class="ca_word">长安汽车 | 成本管理系统</span>
        </el-col>
        <el-col :span="12">
          <!-- <span class="pull-right ca_word">欢迎登录！</span> -->
        </el-col>
      </el-row>
    </div>
    <div class="body">
      <div class="login_body">
        <el-card class="box-card" id="login_wrapper" v-loading="loginLoading">
          <img src="@/assets/img/login-img.png" class="login__panel-img" />
          <el-form ref="formRef" class="login__form" :rules="rules" :model="form" label-width="80px">
            <p class="login__form-title">欢迎登录</p>
            <el-form-item label="账号:" class="login-item">
              <el-input v-model="form.name" placeholder="请输入帐号">
                <template slot="prefix">
                  <!-- <span class="svg-container"> -->
                  <svg-icon icon-class="user" />
                  <!-- </span> -->
                </template>
                <!-- <i slot="prefix" class="iconfont icon-yonghuming"></i> -->
              </el-input>
            </el-form-item>
            <el-form-item label="密码:" class="login-item">
              <el-input :type="pwdInput.pwdType" v-model="form.password" placeholder="请输入密码">
                <template slot="prefix">
                  <svg-icon icon-class="password" />
                </template>
                <template slot="suffix">
                  <span @click="changePwdType">
                    <!-- <svg-icon :name="pwdInput.pwdClass" /> -->
                    <svg-icon :icon-class="pwdInput.pwdClass" />
                  </span>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="验证码:">
              <el-input v-model="form.captcha" auto-complete="off" placeholder="验证码" style="width: 67%"
                @keyup.enter.native="login">
                <template #prefix><svg-icon icon-class="validCode" /></template>
                <!-- <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" /> -->
              </el-input>
              <div class="login-code">
                <img :src="codeUrl" @click="getCode" class="login-code-img" />
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="login" style="float: right;width: 100%;"
                :loading="loginIng">登录</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </div>

    <footer class="login__footer">
      <p class="login__footer-copyright"></p>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { Ref, onMounted, ref } from "vue";
import { Message } from "element-ui";
import { useRouter } from "vue-router/composables"
import { getCaptcha, loginCms } from "@/requests/api/login";
import { MODE } from "../data";

const form = ref({
  name: "admin",
  password: MODE === "fin" ? "FinanceCas2024@!" : "FinanceTest2024@!", // 正式:测试
  captcha: "",
})
const rules = ref({
  name: [
    { required: true, message: '请输入账户名', trigger: 'blur' },
    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    // { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
  ],
  captcha: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    // { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
  ],
})
const pwdInput = ref({
  pwdType: "password",
  pwdClass: "eye",
})
const formRef: Ref<any> = ref(null)
const loginLoading = ref(false)
const loginIng = ref(false)
const $router = useRouter()
const login = () => {
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      // 模拟验证
      if (form.value.name.length < 1) {
        Message.error("请输入帐号");
        return false;
      }

      if (form.value.password.length < 1) {
        Message.error("请输入密码");
        return false;
      }
      if (form.value.captcha.length < 1) {
        Message.error("请输入验证码");
        return false;
      }
      loginLoading.value = true;
      const res: any = await loginCms({
        "username": form.value.name,
        "password": form.value.password,
        "captcha": form.value.captcha,
        "captchaId": captchaId
      })
      loginLoading.value = false;
      if (res.code === 200) {
        localStorage.setItem("token", res.data)
        await $router.push("/transction/all")
      } else {
        Message.error(res.message
          || "登录失败，服务器500");
        await getCode()
      }
      // $router.push("/transction/all")
    } else {
      console.log('error submit!!');
      return false;
    }
  });

};
const changePwdType = () => {
  pwdInput.value.pwdType = pwdInput.value.pwdType === "password" ? "text" : "password";
  pwdInput.value.pwdClass =
    pwdInput.value.pwdClass === "eye"
      ? "eye-open"
      : "eye";
}
const codeUrl = ref("http://")
const getCode = async () => {
  // todolet
  const res = await getCaptcha()
  console.log('code', res)
  if ((res as any).code === 200) {
    // captcha = res.data.captcha
    codeUrl.value = "data:image/gif;base64," + res.data.captcha
    captchaId = res.data.captchaId
  }
}
// let captcha = ""
let captchaId = ""
onMounted(async () => {
  await getCode()
})
</script>

<style scoped lang="scss">
@import "./Login.scss";

:deep(.el-input__suffix) {
  line-height: 40px;
  cursor: pointer;
}
</style>
